<template>
	<view>
		<view class="w100 h-160 tabbars ">
			<view class="flex-between h-140" style="position: relative;z-index: 9999;">
				<view class="" @click="seletab(1)">
					<view :class="PageCur==1?'w-120 h-140 text-center padding-bottom-10':'w-120 h-120 text-center'">
						<image :src=" Imgbase+'/new_good_tab1.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(2)">
					<view :class="PageCur==2?'w-120 h-140 text-center padding-bottom-10':'w-120 h-120 text-center'">
						<image :src=" Imgbase+'/new_good_tab2.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(3)">
					<view :class="PageCur==3?'w-120 h-140 text-center padding-bottom-10':'w-120 h-120 text-center'">
						<image :src=" Imgbase+'/new_good_tab3.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="" @click="seletab(4)">
					<view :class="PageCur==4?'w-120 h-140 text-center padding-bottom-10':'w-120 h-120 text-center'">
						<image :src=" Imgbase+'/new_good_tab4.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
				<view class="padding-bottom-10" @click="seletab(5)">
					<view :class="PageCur==5?'w-120 h-140 text-center padding-bottom-10':'w-120 h-120 text-center'">
						<image :src=" Imgbase+'/new_good_tab5.png'" mode="aspectFit" class="w100 h100 margin-top-10">
						</image>
					</view>
				</view>
			</view>
			<view class="bgcs">

			</view>
			<view class="bgcs_top">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				PageCur: 3
			}
		},
		methods: {
			seletab(i) {
				this.PageCur = i
				switch (i) {
					case 1:
						uni.switchTab({
							url: '/pages/goodspoor/index'
						})
						break;
					case 2:
						uni.switchTab({
							url: '/pages/goodspoor/backpack'
						})
						break;
					case 3:
						uni.switchTab({
							url: '/pages/index/kpindex'
						})
						break;
					case 4:
						uni.switchTab({
							url: '/pages/goodspoor/socity'
						})
						break;
					case 5:
						uni.switchTab({
							url: '/pages/goodspoor/user'
						})
						break;
				}
			},
		},
		onLoad(options) {

		}
	}
</script>

<style lang="less">
	.tabbars {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 15rpx;
		z-index: 999999;

		.bgcs {
			position: absolute;
			bottom: 0%;
			left: 0;
			width: 100%;
			height: 45rpx;
			background-color: #EE9A52; 
		}

		.bgcs_top {
			position: absolute;
			bottom: 45rpx;
			left: 0;
			background: linear-gradient(to bottom, rgba(238, 155, 85, .1), rgba(238, 155, 85, 1));
			width: 100%;
			height: 30rpx;
		}
	}

	.i_large {
		width: 100rpx;
		height: 100rpx;
		margin-top: 15rpx;
	}

	.i_small {
		width: 70rpx;
		height: 70rpx;
		margin-top: 30rpx;
	}

	.text_c {
		color: #4FA356;
	}

	.text {
		color: #6E6E6E;
	}
</style>